<template>
<!-- 轮播图组件 -->
    <!-- 轮播图背景 -->
  <div class="banner_wrap">
      <div class="banner_bg">
          
      </div>
      <!-- 轮播图 -->
        <div class="banner_info">
            <van-swipe autoplay="3000" duration="500" width="10px">
                <van-swipe-item v-for="(item,index) in bannerList" :key="index">
                    <router-link :to="{name:'info',params:{goodid:item.url.substr(item.url.indexOf('=')+1,5)}}">
                    <img :src="item.image" alt="">
                    </router-link>
                </van-swipe-item>
            </van-swipe>
        </div>
      </div>
</template>

<script>
// 引入封装的axios调用轮播图接口
import {getBanner} from "../../../api/home"
export default {
    name:'banner',
    data() {
        return {
            bannerList:[]//轮播图列表
        }
    },
    created() {
        // 调用轮播图接口并且存储数据
        getBanner().then(res=>{
            // console.log("bannerList---",res)
            // console.log(11)
            this.bannerList = res.result.data.banner
        })
    },
}
</script>

<style lang="less">
.banner_wrap{
    height: 300px;
    width: 100%;
    position: relative;
}
.banner_bg{
    position: absolute;
    width: 100%;
    height: 280px;
    background:  linear-gradient(to bottom, #f20 0%,#f25513 100%);
    border-bottom-left-radius: 40%;
    border-bottom-right-radius: 40%;

}
.banner_info{
    width: 100%;
    height: 280px;
    // left: 5%;
    position: absolute;
    top: 100px;
    .van-swipe__track{
        width: 90%;
        height: 280px;
            // margin-right: 10%;

        img{
            width: 90%;
            height: 280px;
            border-radius: 30px;
            // margin-left: -75px;
        }
    }
}

.nav_warp{
    height: 320px;
    width: 100%;
    ul{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        li{
            width: 150px;
            height: 140px;
        }
    }
}

</style>